<template>
  <div>
    <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="back">
      <template #right>
        <van-search v-model="value" show-action placeholder="输入商品名称" shape="round" 
          class="van-search" @input="changeCount()"/>
      </template>
    </van-nav-bar>
    <Bg>
      <div class="SearchBox" v-for="(item, index) in searchList" :key="index" v-show="searchList" @click="viewProduct(item.pid)">
        <div class="SearchBoxImg">
          <img :src="item.smallImg" alt="" class="SearchImg">
        </div>
        <div class="SearchName">{{item.name}}</div>
        <div class="SearchENname">{{item.enname}}</div>
        <div class="Searchpire">&yen;{{item.price}}</div>
      </div>
      <span class="searchzhi" v-show="isshowzhi">非常抱歉！没有您要找的商品(╥﹏╥)o</span>
    </Bg>
  </div>
</template>

<script>
  import Bg from "../components/Bg.vue";
  import "../assets/less/Search.less";
  export default {
    name: "search",
    data() {
      return {
        value: '',
        searchList: "",
        isshowzhi: false
      };
    },
    components: {
      Bg,
    },
    methods: {
      changeCount(){
        this.isshowzhi=false
        if(this.value===""){
          return
        }else{
          this.getAddressListData()
        }
      },
      back() {
        this.$router.go(-1);
      },
      getAddressListData() {
        this.axios({
            //请求方式
            method: "GET",
            url: this.baseUrl + "/search",
            params: {
              appkey: this.appkey,
              name: this.value
            }
          })
          .then((res) => {
            console.log("res getAddressListData ==> ", res);
            this.$toast.clear();

            if (res.data.code === "Q001") {
              this.searchList = res.data.result;
            }
            if (this.searchList.length===0) {
              this.isshowzhi = "ture"
            } else {
              this.$toast({
                message: res.data.msg,
                forbidClick: true,
                duration: 3000
              })
            }
          })
          .catch((err) => {
            this.$toast.clear();
            console.log("err ==> ", err);
          });
      },
       //查看商品详情
    viewProduct(pid) {
      this.$router.push({name: 'Detail', params: {pid}});
    },
     Nikname() {
      let tokenString = this.$cookies.get("tokenString");
      // console.log("tokenString ==> ", tokenString);

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        //请求方式
        method: "GET",
        url: this.baseUrl + "/findAccountInfo",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((res) => {
          console.log("res Nikname ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === "B001") {

            this.Mineoff=res.data.result[0].nickName;
            // console.log(this.Mineoff);

          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    },
  }
</script>

<style>

</style>